<template>
	<div class="theforms">
		<div class="theformss">
			<span>选择商品</span>
			<b @click="dialogTableVisible = true">+</b>
		</div>
		<div class="dialog">
			<el-dialog title="砍价状态" :visible.sync="dialogTableVisible">
				<div class="search_bar">
					<el-row :gutter="20">
						<el-col :span="8">
							<div class="box">
								<div class="search_title">砍价状态：</div>
								<el-select
									@change="pageChange(1)"
									v-model="commodityClass"
									clearable
									placeholder="请选择"
								>
									<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="box">
								<div class="search_title">商品搜索：</div>
								<el-input
									v-model="commodityKeyowrd"
									placeholder="请输入关键字，id，商品名称"
								></el-input>
							</div>
						</el-col>
					</el-row>
				</div>
				<el-table :data="gridData" style="width:100%;height:375px">
					<el-table-column property="id" label="ID"></el-table-column>
					<el-table-column property="img" label="商品图">
						<template slot-scope="scope">
							<img :src="scope.row.img" alt="" /> </template
					></el-table-column>
					<el-table-column property="title" label="商品名称">
					</el-table-column>
					<el-table-column property="price" label="商品价格">
						<template slot-scope="scope">
							<span>¥{{ scope.row.obj.price }}.00</span>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					background
					class="page-box"
					layout="prev, pager, next"
					:total="total"
					:current-page="pageIndex"
					:page-size="pageSize"
					@current-change="pageChange"
				>
				</el-pagination>
			</el-dialog>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			gridData: [],
			dialogTableVisible: false,
			pageIndex: 1,
			pageSize: 20,
			total: 0,
			commodityKeyowrd: "",
			commodityClass: "",
			options: [],
		};
	},
	methods: {
		handleClose(done) {
			this.$confirm("确认关闭？")
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
		pageChange(ind) {
			this.loadingBool = true;
			this.pageIndex = ind;
			this.$api
				.commodityList({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					keyword: this.commodityKeyowrd,
				})
				.then((res) => {
					if (res.code === 1) {
						// 赋值数据
						this.gridData = res.data;
						this.total = res.total;
					}
					this.loadingBool = false;
				});
		},
		handleClick() {
			this.pageChange(1);
			console.log(1);
		},
	},
	filters: {
		timeToDate(value) {
			return new Date(value.split(" ")[0]).toLocaleString();
		},
	},
	created() {
		this.pageChange();
	},
	watch: {
		commodityKeyowrd() {
			// 什么防抖 防止函数抖动
			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.pageChange(1);
			}, 700);
		},
	},
};
</script>

<style lang="scss">
.box {
	display: flex;
	align-items: center;
}
.search_title {
	width: 100px;
}
.theformss {
	display: flex;
	margin-top: 20px;
	align-items: center;
	b {
		font-size: 30px;
		border: 1px dashed;
		padding: 30px 40px;
		margin-left: 30px;
	}
}
.dialog {
	padding: 0 20px;
}
.page-box {
	text-align: center;
	margin-top: 20px;
}
</style>
